/// describe
///
/// created by hujintao
/// created at 2021/5/13
//

import 'dart:convert';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutterappdriver/network/music_api.dart';
import 'package:flutterappdriver/network/music_db_favorite.dart';
import 'package:flutterappdriver/pages/collect/favorite_page.dart';
import 'package:flutterappdriver/pages/home/history_page.dart';
import 'package:flutterappdriver/pages/search/search_page.dart';
import 'package:flutterappdriver/pages/setting_page.dart';
import 'package:flutterappdriver/pages/webview/webview_page.dart';
import 'package:flutterappdriver/provider/color_provider.dart';
import 'package:flutterappdriver/provider/music_controller.dart';
import 'package:flutterappdriver/utils/navigator_util.dart';
import 'package:flutterappdriver/utils/screen.dart';
import 'package:flutterappdriver/utils/song_util.dart';
import 'package:flutterappdriver/widget/mv_item.dart';
import 'package:flutterappdriver/widget/play_list_item.dart';
import 'package:flutterappdriver/widget/search_bar.dart';
import 'package:flutterappdriver/widget/song_item_grid.dart';
import 'package:flutterappdriver/widget/text_icon_bg.dart';
import 'package:oktoast/oktoast.dart';
import 'package:provider/provider.dart';
class SongListPage extends StatefulWidget {
  final ValueChanged<int> tapCallback;

  SongListPage({Key? key, required this.tapCallback}) : super(key: key);
  @override
  _SongListPageState createState() => _SongListPageState();
}

class _SongListPageState extends State<SongListPage> with SingleTickerProviderStateMixin {
  List _newSongs = [];
  List _topSongs = [];
  List _mvList = [];
  List _playList = [];
  double _appBarHeight = 200.0;
  List artistList = [];

  @override
  void initState() {
    super.initState();
    // 宽高比2/1
    _appBarHeight = Screen.width / 2;

    MusicApi.getTopSongs(1).then((re) {
      setState(() {
        _topSongs = re!.sublist(0, 6);
      });
      // 第一次进来的时候，设置默认的播放列表
      MusicControllerProvider musicController = Provider.of<MusicControllerProvider>(context,listen: false,);
      if (musicController.getCurrentSong() == null) {
        FavoriteDB().getFavoriteList().then((favList) {
          List defaultList = favList.length > 0 ? favList : _topSongs;
          musicController.setPlayList(defaultList, 0);
        });
      }
    });

    MusicApi.getNewSongs().then((re) {
      setState(() {
        _newSongs = re.sublist(0, 5);
        print("getNewSongs: ${_newSongs}");
      });
    });

    // TODO 后面添加： 下拉刷新，滑到下面才加载更多。
    MusicApi.getMVList(MusicApi.URL_MV_PERSONAL).then((list) {
      if (list.length > 5) {
        list = list.sublist(0, 2);
      }
      print("getMVList>>>>$list");
      setState(() => this._mvList = list);
    });

    MusicApi.getPlayList('流行').then((list) {
      if (list.length > 10) {
        list = list.sublist(0, 4);
      }
      setState(() => this._playList = list);
    });

    //print("imageSize: ${_appBarHeight}, ${ScreenSize.width}");
  }

  _onScrolled(ScrollNotification notification) {
    //double progress = notification.metrics.pixels / notification.metrics.maxScrollExtent;

    //print("${(progress * 100).toInt()}%");

    //print("BottomEdge: ${notification.metrics.extentAfter == 0}");
    //return true; //放开此行注释后，进度条将失效
  }

  @override
  Widget build(BuildContext context) {
    return _topSongs.length == 0
        ? Center(child: CircularProgressIndicator())
        : Scaffold(
        body: NotificationListener<ScrollNotification>(
          onNotification: (notification) => _onScrolled(notification),
          child: CustomScrollView(
            cacheExtent: 10.0, // 缓存区域，滚出多远后回收item，调用其dispose
            slivers: <Widget>[
              _buildHeader(),
              _buildCenterGrid(),
              _buildDivider(),
              _buildSubHeader('推荐单曲', Icons.music_note, onPressed: () {
                // NavigatorUtil.push(context, RankSongList(0, '推荐单曲'));
              }),
              _buildSongGrid(),
              _buildDivider(),

              _buildSubHeader('推荐歌单', Icons.library_music, onPressed: () {
                widget.tapCallback(1);
              }),
              _buildPlayListGrid(),
              _buildDivider(),

              _buildSubHeader('推荐MV', Icons.video_library, onPressed: () {
                widget.tapCallback(2);
              }),
              _buildMVList(),
            ],
          ),
        ));
  }
  /// 推荐歌单
  Widget _buildPlayListGrid() {
    return SliverPadding(
        padding: EdgeInsets.fromLTRB(10.0, 4.0, 10.0, 10.0),
        sliver: SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 1.0,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
          ),
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return PlayListItem(_playList[index], heroTag: 'from_recommend');
            },
            childCount: _playList.length,
          ),
        ));
  }

  /// 推荐MV
  Widget _buildMVList() {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
          return MVItem(_mvList[index]);
        },
        childCount: _mvList.length,
      ),
    );
  }

  /// 推荐单曲
  Widget _buildSongGrid() {
    return SliverPadding(
        padding: EdgeInsets.fromLTRB(10.0, 4.0, 10.0, 10.0),
        sliver: SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.0,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
          ),
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return SongItemOfGrid(this._topSongs, index);
            },
            childCount: _topSongs.length,
          ),
        ));
  }

  /// 区头组件
  Widget _buildSubHeader(
      String title,
      IconData icon, {
        String action = "",
        GestureTapCallback? onPressed,
      }) {
    return SliverToBoxAdapter(
        child: Container(
          padding: EdgeInsets.fromLTRB(8.0, 16.0, 16.0, 4.0),
          child: Row(
            children: <Widget>[
              Icon(
                icon,
                color: Provider.of<ColorStyleProvider>(context).getCurrentColor(),
                size: 18.0,
              ),
              SizedBox(width: 4.0),
              Text(
                title,
                style: TextStyle(
                  color: Colors.black87,
                  fontSize: 16.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Expanded(
                child: Container(),
              ),
              Container(
                  height: 26,
                  width: 60,
                  child: OutlineButton(
                    padding: EdgeInsets.all(0.0),
                    child: Text('更多..',
                        maxLines: 1,
                        style: TextStyle(fontSize: 11.0, color: Colors.black87)),
                    onPressed: onPressed,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(13.0)),
                  ))
            ],
          ),
        ));
  }

  // 分割线
  Widget _buildDivider() {
    // 加载普通组件到CustomScrollView，
    return SliverToBoxAdapter(
      child: Divider(
        height: 1.0,
        thickness: 1.0,
        color: Color(0x11000000),
        //indent: 16.0,
        //endIndent: 16.0,
      ),
    );
  }

  /// 四个按钮(Grid)
  Widget _buildCenterGrid() {
    return SliverToBoxAdapter(
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              TextIconWithBg(
                  icon: Icons.date_range,
                  title: 'WebView',
                  onPressed: () {
                    NavigatorUtil.push(context, WebViewPage());
                  }),
              TextIconWithBg(
                  icon: Icons.people,
                  title: '收藏',
                  onPressed: () {
                    NavigatorUtil.push(context, FavoritePage());
                  }),
              TextIconWithBg(
                  icon: Icons.history,
                  title: '历史',
                  onPressed: () {
                    showToast("历史点击了");
                    NavigatorUtil.push(context, HistoryPage());
                  }),
              TextIconWithBg(
                  icon: Icons.settings,
                  title: '设置',
                  onPressed: () {
                    NavigatorUtil.push(context, SettingPage());
                  }),
            ]));
  }

  /// 轮播图+搜索条
  Widget _buildHeader() {
    return SliverAppBar(
      expandedHeight: _appBarHeight,
      pinned: true,
      floating: false,
      titleSpacing: 36.0,
      snap: false,
      title: InkWell(
        onTap: () {
          NavigatorUtil.pushFade(context, SearchPage());
        },
        child: SearchBar(
          enable: false,
          onSpeechPressed: () {
            // NavigatorUtil.pushFade(context, SearchPage(startSpeech: true));
          },
        ),
      ),
      flexibleSpace: FlexibleSpaceBar(
        background: _buildSwiper(),
      ),
    );
  }

  Widget _buildSwiper() {
    return Swiper(
      itemHeight: _appBarHeight,
      autoplay: true,
      autoplayDelay: 6000,
      autoplayDisableOnInteraction: true,
      itemBuilder: (BuildContext context, int index) {
        Map song = _newSongs[index];
        String picUrl = SongUtil.getSongImage(song, width: 600, height: 300);
        return CachedNetworkImage(
          imageUrl: picUrl,
          fit: BoxFit.cover,
        );
        /* return GestureDetector(
          onTap: () =>
              PlayerPage.gotoPlayer(context, list: _newSongs, index: index),
          child: CachedNetworkImage(
            imageUrl: picUrl,
            fit: BoxFit.cover,
          ),
        ); */
      },
      itemCount: _newSongs.length,
      pagination: new SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              size: 8.0, activeSize: 8.0, color: Colors.white60)),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}